<template>
<div>
  <h1>用户信息</h1>
  <table border="2" align="center">
    <tr>
      <td>编号</td>
      <td>姓名</td>
      <td>密码</td>
      <td>手机</td>
      <td>注册时间</td>
      <td>账户余额</td>
      <td>性别</td>
    </tr>
    <tr v-for="user in UserList">
      <td>{{user.id}}</td>
      <td>{{user.username}}</td>
      <td>{{user.password}}</td>
      <td>{{user.phone}}</td>
      <td>{{user.createTime}}</td>
      <td>{{user.money}}</td>
      <td>{{user.sex==1?'男':'女'}}</td>
    </tr>

  </table>
  <hr>
  <button @click="show1">get-PathVariable</button>
  <button @click="show2">get-form</button>
  <button @click="show3">post-PathVariable</button>
  <form>
    用户名<input v-model="user.username"><br>
    密码<input v-model="user.password">
  </form>
</div>
</template>

<script>
import axios from "axios";

export default {
  name: "UserView",
  data() {
    return {
      UserList:[],
      user:{
        username:"",
        password:""
      }
    }
  },
  methods: {
    fetchData(){
      axios.get("/user/list")
          .then(res=>{

            console.log(res.data)
            //const R=res.data;
            this.UserList=res.data
          })
          .catch(function (error){
            console.log(error)
          })
    },
    //携带路径
    show1(){
      axios.get("/user/4")
          .then(res=>{
            //console.log(res.data.data)
            console.log(res.data)
          })
    },
    //请求表单
    show2(){
      //多个参数，手动拼接
      // axios.get("http://localhost:8082/user/login?username=admin&password=123456")
      //     .then(res=>{
      //       console.log(res.data.data)
      //     })
      //也可以
      axios.get("/user/login",
          {
            params: {
              username: "admin",
              password: "123456"
            }
          })
          .then(res=>{
           // console.log(res.data.data)
            console.log(res.data)
          })
    },
    show3(){
      console.log(this.user)
      axios.post("/user/add",this.user)
          .then(res=>{
            //console.log(res.data.code)
            console.log(res.data)
          })
    }
  },
  created() {
    this.fetchData();
  }
}
</script>

<style scoped>

</style>